<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>模拟流程：{{ $route.query.name }}</span>

        <el-button
          style="float: right; padding: 3px 0; margin-right: 10px"
          type="text"
          @click="clearSimulationRecord"
          >清空模拟记录</el-button
        >
        <el-button
          style="float: right; padding: 3px 0; margin-right: 10px"
          type="text"
          @click="$router.push({ path: '/workflow/list' })"
          >返回</el-button
        >
      </div>
      <div>
        <div>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="表单json数据 "
            v-model="workTaskForm.formData"
          ></el-input>
        </div>
        <br />
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-select
              placeholder="发起人"
              size="mini"
              v-model="workTaskForm.createdUserId"
            >
              <el-option
                v-for="item in allUsers"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" @click="startWork"
              >发起流程</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>流程实例</span>
      </div>
      <el-table ref="singleTable" v-loading="loading" :data="[workTaskForm]">
        <!-- <el-table-column type="selection" width="50"> </el-table-column> -->
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column property="name" label="流程名称" width="200">
        </el-table-column>
        <el-table-column property="formData" label="表单"> </el-table-column>
        <el-table-column property="workTaskStatus" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.workTaskStatus == 0">待审批</span>
            <span v-if="scope.row.workTaskStatus == 1">审批中</span>
            <span v-if="scope.row.workTaskStatus == 2">已审批</span>
          </template>
        </el-table-column>
        <el-table-column
          property="createdUserId"
          label="创建用户id"
          width="200"
        >
          <template slot-scope="scope">
            <span>{{ getUserName(scope.row.createdUserId) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="creationTime" label="创建时间" width="320">
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 审批 -->
    <el-card class="box-card" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>审批</span>
      </div>
      <el-select
        placeholder="审批人"
        size="mini"
        v-model="workStep.handleUser.id"
      >
        <el-option
          v-for="item in allUsers"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <el-card shadow="never" style="margin-top: 10px" v-if="canHandle">
        <div>
          <el-radio v-model="isForward" :label="false">处理</el-radio>
          <el-radio v-model="isForward" :label="true">转发</el-radio>
        </div>
        <br />
        <div v-if="!isForward">
          <div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="批语 "
              v-model="workStep.comment"
            ></el-input>
          </div>
          <br />
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-button type="primary" size="mini" @click="passApprove"
                >通过</el-button
              >
              <el-button type="danger" size="mini" @click="rejectApprove">驳回</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <nodeUser :userSelectors="workStep.userSelectors"></nodeUser>
          <br />
          <el-button type="danger" size="mini" @click="forwardProve">转发/代办</el-button>
        </div>
      </el-card>
    </el-card>
    <!-- 审批记录 -->
    <el-card class="box-card" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>审批记录</span>
      </div>
      <el-table ref="singleTable" v-loading="loading" :data="workHistories">
        <!-- <el-table-column type="selection" width="50"> </el-table-column> -->
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column property="nodeName" label="节点" width="80">
        </el-table-column>
        <el-table-column property="name" label="审批人" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.handleUser.name }}</span>
          </template>
        </el-table-column>
        <el-table-column property="isHandled" label="已审批" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.isHandled == 0">否</span>
            <span v-if="scope.row.isHandled == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column property="handleType" label="审批操作" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.isHandled == 1">
              <span v-if="scope.row.handleType == 0">通过</span>
              <span v-if="scope.row.handleType == 1">拒绝</span>
              <span v-if="scope.row.handleType == 2">撤回</span>
              <span v-if="scope.row.handleType == 3">转发</span>
              <span v-if="scope.row.handleType == 4">未处理</span>
            </span>
            <span v-else>未处理</span>
          </template>
        </el-table-column>
        <el-table-column property="isRead" label="已读" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.isRead == 0">否</span>
            <span v-if="scope.row.isRead == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column property="comment" label="批语"> </el-table-column>
        <el-table-column property="creationTime" label="审批时间" width="320">
        </el-table-column>
        <el-table-column property="" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.isHandled == 1 &&
                scope.row.handleUser.id == workStep.handleUser.id
              "
              type="text"
              size="small"
              @click="withdrawProve(scope.row.id)"
              >撤回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import nodeUser from "./nodeUser";
export default {
  components: { nodeUser },
  name: "workflow-simulation",
  props: {
    workflowName: {
      default: "测试流程",
    },
    workflowId: {
      default: "1",
    },
  },
  computed: {
    id() {
      return this.$route.query.id || this.workflowId;
    },
    name() {
      return this.$route.query.name || this.workflowName;
    },

    canHandle() {
      var steps = this.workStepsOfUser.filter(
        (w) => w.workTaskId == this.workTaskForm.id
      );
      if (steps.length == 1) {
        this.workStep.stepId = steps[0].id;
        return true;
      }
      return false;
    },
  },
  watch: {
    "workStep.handleUser.id": {
      handler() {
        this.getUnHandlerWorkStepsOfUser();
      },
    },
  },
  data() {
    return {
      formData: "",
      loading: false,
      allUsers: [],
      workTaskForm: {
        id: "",
        createdUserId: "",
        entityFullName: "",
        entityKeyValue: "",
        formData: "{}",
        workTaskStatus: "",
        name: "模拟流程",
        workflowId: {},
      },
      workStep: {
        handleUser: {
          id: "",
        },
        userSelectors: [
          {
            selectorId: "",
            selectorName: "",
            selections: [],
            parameter: "",
            description: "",
            handleType: 0,
          },
        ],
        comment: "",
        stepId: "",
      },
      workStepsOfUser: [],
      workHistories: [],
      isForward: false,
    };
  },
  mounted() {
    this.clearSimulationRecord();
    this.getAllUserForSimulation();
  },
  methods: {
    goback() {
      this.$navtab.close(this.$route.fullPath);
    },
    getAllUserForSimulation() {
      this.$store.dispatch("workflow/getAllUserForSimulation").then((res) => {
        this.allUsers = res.data;
        this.workTaskForm.createdUserId = this.allUsers[0].id;
      });
    },
    getAllTaskStepsOfWorkTask() {
      this.$store
        .dispatch("workflow/getAllTaskStepsOfWorkTask", {
          worktaskId: this.workTaskForm.id,
        })
        .then((res) => {
          this.workHistories = res;
        }).catch(e=>{
          this.loading=false
        });
    },
    getUnHandlerWorkStepsOfUser() {
      if (
        this.workStep.handleUser.id &&
        this.workStep.handleUser.id.length > 0
      ) {
        this.$store
          .dispatch("workflow/getUnHandlerWorkStepsOfUser", {
            userId: this.workStep.handleUser.id,
          })
          .then((res) => {
            this.workStepsOfUser = res.data;
          }).catch(e=>{
          this.loading=false
        });
      }
    },

    getUserName(userId) {
      var users = this.allUsers.filter((u) => u.id == userId);
      return users.length > 0 ? users[0].name : "";
    },
    getWorkTask() {
      this.$store
        .dispatch("workflow/getWorkTask", { id: this.workTaskForm.id })
        .then((res) => {
          this.workTaskForm = res.data;
        }).catch(e=>{
          this.loading=false
        });
    },
    clearSimulationRecord() {
      this.$store.dispatch("workflow/clearSimulationRecord").then((res) => {});
    },
    callback()
    {
       this.getAllTaskStepsOfWorkTask();
        this.getUnHandlerWorkStepsOfUser();
        this.getWorkTask();
        this.workStep.comment="";
    },
    startWork() {
      this.loading = true;
      this.workTaskForm.workflowId = {
        versionId: Number(this.$route.query.versionId),
        id: this.$route.query.id,
      };

      let _this = this;
      this.$store
        .dispatch("workflow/createWorkTask", this.workTaskForm)
        .then((res) => {
          this.workTaskForm = res;
          return res;
        })
        .then((task) => {
          const data = {
            workTaskId: task.id,
          };
          this.$store.dispatch("workflow/startWorkTask", data).then((res) => {
            this.callback();
            _this.loading = false;
          }).catch(e=>{
          this.loading=false
        });
        }).catch(e=>{
          this.loading=false
        });
    },
    passApprove() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.stepId,
        comment: this.workStep.comment,
        resourceIds: "",
      };
      let _this = this;

      this.$store.dispatch("workflow/passProve", data).then((res) => {
        _this.loading = false;
        this.callback();
      }).catch(e=>{
          this.loading=false
        });
    },
    rejectApprove() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.stepId,
        comment: this.workStep.comment,
        resourceIds: "",
      };
      let _this = this;

      this.$store.dispatch("workflow/rejectProve", data).then((res) => {
        _this.loading = false;
        this.callback();
      }).catch(e=>{
          this.loading=false
        });
    },
    forwardProve() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.stepId,
        comment: this.workStep.comment,
        resourceIds: "",
        userSelectors: this.workStep.userSelectors
      };
      let _this = this;

      this.$store.dispatch("workflow/forwardProve", data).then((res) => {
        _this.loading = false;
        this.callback();
      }).catch(e=>{
          this.loading=false
        });
    },
    withdrawProve(stepId) {
      this.loading = true;
      const data = {
        stepId: stepId,
        comment: this.workStep.comment,
      };
      let _this = this;

      this.$store.dispatch("workflow/withdrawProve", data).then((res) => {
        _this.loading = false;
        this.callback();
      }).catch(e=>{
          this.loading=false
        });
    },
  },
};
</script>

<style></style>
